<template>
  <div class="content">
    <el-button v-if="false" class="btnClass" type="primary" @click="handleAdd"
      >添加合同</el-button
    >
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      v-loading="loading"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <template #empty>
        <el-empty :image-size="100" description="暂无数据"></el-empty>
      </template>
      <el-table-column type="index" label="序号" width="60">
        <template v-slot="scope">
          <span>{{
            (formInline.pageNum - 1) * formInline.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="contractNum" label="合同编号"></el-table-column>
      <el-table-column prop="contractName" label="合同名称"></el-table-column>
      <el-table-column prop="contractSignTime" label="合同签订时间"></el-table-column>
      <el-table-column label="合同类型">
        <template #default="{ row }">
          <span v-if='row.contractType == 1'>产学研合作合同</span>
          <span v-if='row.contractType == 2'>其他合同</span>
        </template>
      </el-table-column>
      <el-table-column prop="partyA" label="甲方单位"></el-table-column>
      <el-table-column prop="partyB" label="乙方单位"></el-table-column>
      <el-table-column prop="partyC" label="丙方单位"></el-table-column>
      <el-table-column prop="otherPartyList" label="其它相关单位">
        <template #default="{ row }">
          <span  v-for="item in row.otherPartyList" :key="item.id">
            {{ item.companyName }}&nbsp;&nbsp;
          </span>
        </template>
      </el-table-column>
      <el-table-column label="合同附件">
        <template #default="{ row }">
          <el-link
            v-for="(item, index) in row.documentAttachmentArr"
            :key="index"
            @click.prevent="preview(item)"
          >
            {{ item.fileName }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
    </el-table>
    <re-pagination
      :total="total"
      v-show="total > 0"
      v-model:page="formInline.pageNum"
      v-model:limit="formInline.pageSize"
      @pagination="handleSearch"
    />
    <el-dialog
      title="添加合同"
      v-model="dialogFormVisible"
      destroy-on-close
      width="45vw"
    >
      <add-contract @emitSubmit="onEmitSubmit" />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { getContractDocList } from "/@/api/document";
import { ref, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import AddContract from "../AddContract.vue";

const route = useRoute();

let loading = ref<boolean>(false);

let dialogFormVisible = ref<boolean>(false);

let total = ref<number>(0);

let formInline = reactive({
  pageSize: 10,
  pageNum: 1,
  projectManageId: route.query?.id
});

let state = reactive({
  tableData: []
});

let { tableData } = toRefs(state);

const preview = (item: any) => {
  window.open(
    `${location.origin}${location.pathname}#/online?uuidFile=${item.uuidFile}&fileName=${item.fileName}`
  );
};
// 请求公司列表表格数据
async function getTableData() {
  // 真实请求待添加
  loading.value = true;
  try {
    const { code, data } = await getContractDocList({
      documentTypeCode: "6",
      projectManageId: route.query?.id,
      pageNum: 1,
      pageSize: 10
    });
    // const { code, data } = await postContractList(obj);
    if (code === 200) {
      state.tableData = data.list;
      total.value = data.rows;
      if(state?.tableData?.length){
        state.tableData.forEach(item => item.otherPartyList = JSON.parse(item.otherParty))
      }
    }
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
}

const onEmitSubmit = () => {
  dialogFormVisible.value = false;
  handleSearch();
};

const handleAdd = () => {
  dialogFormVisible.value = true;
};

const handleSearch = (): void => {
  getTableData();
};

handleSearch();
</script>

<style lang="scss" scoped>
.content {
  min-height: 153px;

  .btnClass {
    margin-bottom: 8px;
  }
}
</style>
